<script setup>
	//前端开发：先死后活法，前端页面数据是死的，只有调用了后端的数据才是真正的动网络数据
	import {ref} from 'vue';
	// 导入axios
	import axios from 'axios';
  const users=ref([])
	import {userGetallService} from './api/user.js'
	import {userDeleteOneService} from './api/user.js'
	const getAllUser =async function (){
	const data=await userGetallService()
	users.value=data
	}
  getAllUser()
	const del =async function (){
		const data=await userDeleteOneService()
		users.value=data
	}

</script>
<template>
	<div>
		<h2>用户信息列表</h2>
		<table>
			<tr>
				<th>ID</th>
				<th>用户名</th>
				<th>信息</th>
				<th>状态</th>
				<th>余额</th>
				<th>操作</th>
			</tr>
			<tr v-for="user in users">
				<td>{{user.id}}</td>
				<td>{{user.username}}</td>
				<td>{{user.info}}</td>
				<td>{{user.status}}</td>
				<td>{{user.balance}}</td>
				<td>
					<button @click="updata">编辑</button>
					<button @click="del(user.id)">删除</button>
				</td>
			</tr>
		</table>
	</div>
</template>


<style scoped>
	button{
		background-color: #aaffff;
		margin: 2px;
		border: 1px #b1b1b1 solid;
	}
</style>